<template>
  <div id="first">
    <div class="first">
      <div class="head">
        <div class="hText">Godz-Fly控制台</div>
        <div class="DateTime">2022年8月9日 14点26分</div>
      </div>
      <div class="body">
        <div class="left kuangkuang">
          <div class="titleH">
            <div class="title"></div>
            <div class="span">电脑详细</div>
          </div>
          <div class="bodyball">
            <div class="ball" style="margin-top: 15%">
              <div class="text">
                <span>10086</span>
                <span>内存容量</span>
              </div>
              <div class="ballb"></div>
              <div class="ballc"></div>
            </div>
          </div>
          <div class="bodyball ball2">
            <div class="ball">
              <div class="text">
                <span>10086</span>
                <span>内存容量</span>
              </div>
              <div class="ballb"></div>
              <div class="ballc"></div>
            </div>
          </div>
          <div class="bodyball ball3">
            <div class="ball">
              <div class="text">
                <span>10086</span>
                <span>内存容量</span>
              </div>
              <div class="ballb"></div>
              <div class="ballc"></div>
            </div>
          </div>
        </div>
        <div class="mid">
          <div class="mid1 kuangkuang">
            <div class="titleH">
              <div class="title"></div>
              <div class="span">电脑详细</div>
            </div>
            <div class="bodyC">
              <!-- 地图 -->
              <div class="left">
                <Map/>
              </div>
              <!-- 圆饼图 -->
              <div class="right">
                <Pie/>
              </div>
            </div>
          </div>
          <div class="mid2 kuangkuang">
            <div class="titleH">
              <div class="title"></div>
              <div class="span">电脑详细</div>
            </div>
            <div class="btn">
              <div class="btn1 btnX">日</div>
              <div class="btn2 btnX">周</div>
              <div class="btn3 btnX">月</div>
            </div>
            <div class="bodyC">
              <!-- 表格 -->
              <div class="left">
                <div id="myChart" ref="myChart"></div>
              </div>

              <div class="right">
                <div class="shang sx">
                  <div class="pos">
                    <div class="title">
                      4435<span>
                        <el-icon>
                          <SortUp />
                        </el-icon>
                      </span>
                    </div>
                    <div class="ud">+5%</div>
                    <div class="wen">今日访问量</div>
                  </div>
                </div>
                <div class="xia sx">
                  <div class="pos">
                    <div class="title">
                      45679<span>
                        <el-icon>
                          <SortUp />
                        </el-icon>
                      </span>
                    </div>
                    <div class="ud">+9%</div>
                    <div class="wen">总访问量</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right kuangkuang">
          <div class="titleH">
            <div class="title"></div>
            <div class="span">电脑详细</div>
          </div>
          <div class="shang rb">
            <div class="con">
              <Area/>
            </div>
          </div>
          <div class="xia rb">
            <div class="con">
              <Area2/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, markRaw } from "vue";
import * as echarts from "echarts";
import Pie from './firstMain/pie.vue';
import Map from './firstMain/WorldMap.vue';
import Area from './firstMain/area.vue'
import Area2 from './firstMain/area2.vue'
import { ElLoading } from "element-plus";

let myCharts = ref(); //定义元素
onMounted(() => {
  // 绘制图表
  myCharts.value = markRaw(
    echarts.init(document.querySelector("#myChart") as HTMLElement)
  );
  myCharts.value.setOption;
  const option = {
    tooltip: {
      trigger: "axis",
      show: true,
      axisPointer: {
        lineStyle: {
          type: "solid",
          color: "blue",
        },
      },
    },
    xAxis: {
      data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 1)",
        },
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 1)",
        },
      },
      
    },
    grid: {
      top: 10,
      right: 0,
      bottom: 20,
      left: 25,
    },
    series: [
      {
        type: "line",
        smooth: true,
        showSymbol: false,
        data: [5, 20, 36, 10, 10, 20],
        areaStyle: {},
      },
    ],
  };
  myCharts.value.setOption(option);
  window.addEventListener("resize", function () {
    myCharts.value.resize();
  });
  //调用转动
  openFullScreen2();
});

//转动函数
const openFullScreen2 = () => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  setTimeout(() => {
    loading.close();
  }, 2000);
};
</script>

<style lang="less" scoped>
#first {
  width: 100%;
  height: 100%;

  .first {
    width: 100%;
    height: 100%;
    position: relative;
    .head {
      width: 100%;
      height: 8%;
    
      .hText {
        float: left;
        font-size: 24px;
        color: aliceblue;
      }

      .DateTime {
        padding-top: 1%;
        padding-left: 2%;
        float: left;
        font-size: 12px;
        color: aliceblue;
      }
    }

    .body {
      width: 100%;
      height: 92%;

      .kuangkuang {
        border-image-source: radial-gradient(
          65% 65%,
          transparent 0px,
          transparent 100%,
          cyan 100%
        );
        border-image-slice: 1;
        border-width: 2px;
        border-style: solid;
        background: linear-gradient(
          0deg,
          rgba(white, 0.1),
          rgba(white, 0.3),
          rgba(white, 0.1)
        );
      }

      .titleH {
        position: absolute;
        width: 100%;
        height: 6%;

        .title {
          width: 35%;
          height: 100%;
          margin: 0 auto;
          transform: perspective(0.5em) rotateX(-5deg);
          border-radius: 5px;
          background: rgba(cyan, 0.3);
        }

        .span {
          position: absolute;
          top: 0;
          color: aliceblue;
          font-size: 18px;
          letter-spacing: 5px;
          text-align: center;
          width: 100%;
        }
      }

      .left {
        width: 25%;
        height: 100%;
        float: left;
        position: relative;
        overflow: hidden;

        .bodyball {
          width: 100%;
          height: 25%;
          .ball {
            width: 125px;
            height: 125px;
            margin: 10% auto;
            border-radius: 50%;
            background-color: rgba(yellow, 0.1);
            border: 5px solid yellow;
            overflow: hidden;
            position: relative;

            .text {
              position: absolute;
              z-index: 2;
              width: 100%;
              top: 32%;

              span {
                display: block;
                color: aliceblue;
                font-size: 14px;
                text-align: center;
                text-shadow: 0 0 5px black;

                &:first-child {
                  font-size: 32px;
                }
              }
            }

            .ballb {
              position: absolute;
              width: 200px;
              height: 200px;
              background-color: rgba(yellow, 1);
              top: 30%;
              left: -15%;
              border-radius: 52% 55% 58% 51%;
              z-index: 1;
              animation: ballRotate 5s linear infinite;
              animation-delay: 3s;
            }

            .ballc {
              position: absolute;
              width: 300px;
              height: 300px;
              background-color: rgba(yellow, 0.5);
              left: -45%;
              top: 28%;
              border-radius: 52% 55% 58% 51%;
              animation: ballRotate 5s linear infinite;
            }

            @keyframes ballRotate {
              0% {
                transform: rotate(0);
              }

              100% {
                transform: rotate(360deg);
              }
            }
          }
        }

        .ball2 {
          .ball {
            background-color: rgba(lime, 0.1);
            border: 5px solid lime;

            .text {
              span {
                color: aliceblue;
                text-shadow: 0 0 5px black;

                &:first-child {
                  font-size: 32px;
                }
              }
            }

            .ballb {
              background-color: rgba(lime, 0.5);
            }

            .ballc {
              background-color: rgba(lime, 0.2);
            }
          }
        }

        .ball3 {
          .ball {
            background-color: rgba(turquoise, 0.1);
            border: 5px solid turquoise;

            .text {
              span {
                color: aliceblue;
                text-shadow: 0 0 5px black;

                &:first-child {
                  font-size: 32px;
                }
              }
            }

            .ballb {
              background-color: rgba(turquoise, 0.7);
            }

            .ballc {
              background-color: rgba(turquoise, 0.3);
            }
          }
        }
      }

      .mid {
        width: 42%;
        height: 100%;
        float: left;
        margin: 0 3.5%;

        .mid1 {
          width: 100%;
          height: 48%;
          position: relative;
          overflow: hidden;

          .titleH {
            height: 12.5%;
            z-index: 1;

            .title {
              width: 22%;
            }

            .span {
              text-align: center;
              width: 100%;
            }
          }

          .bodyC {
            width: 95%;
            height: 100%;
            margin: 0 auto;

            .left {
              width: 70%;
              height: 100%;
            }

            .right {
              width: 30%;
              height: 100%;
            }
          }
        }

        .mid2 {
          width: 100%;
          height: 48%;
          margin-top: 4%;
          position: relative;
          overflow: hidden;

          .titleH {
            height: 12.5%;

            .title {
              width: 22%;
            }

            .span {
              text-align: center;
              width: 100%;
            }
          }

          .btn {
            width: 95%;
            height: 10%;
            margin: 2% auto;

            .btnX {
              position: absolute;
              float: left;
              width: 10%;
              height: 10%;
              border: 1px solid aqua;
              border-radius: 50px;
              z-index: 3;
              text-align: center;
              color: aliceblue;

              &:hover {
                cursor: pointer;
                color: black;
                background-color: aqua;
              }
            }

            .btn1 {
              margin-left: 1%;
            }

            .btn2 {
              margin-left: 13%;
            }

            .btn3 {
              margin-left: 25%;
            }
          }

          .bodyC {
            width: 95%;
            height: 75%;
            margin: 0 auto;

            .left {
              width: 70%;
              height: 100%;
              border-right: 2px solid aqua;

              #myChart {
                width: 95%;
                height: 100%;
                margin: 0 auto;
              }
            }

            .right {
              width: 29%;
              height: 100%;

              .sx {
                position: relative;
                width: 100%;
                height: 100%;

                .pos {
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                  height: 65%;
                  .title {
                    width: 90%;
                    margin: 0 auto;
                    text-align: right;
                    color: aqua;
                    font-size: 32px;
                    font-weight: lighter;

                    span {
                      color: red;
                    }
                  }

                  .ud {
                    width: 90%;
                    margin: 0 auto;
                    text-align: right;
                    font-size: 8px;
                    color: red;
                  }

                  .wen {
                    width: 90%;
                    margin: 0 auto;
                    text-align: right;
                    color: white;
                    font-size: 12px;
                  }
                }
              }

              .shang {
                float: left;
                width: 100%;
                height: 50%;
              }

              .xia {
                float: left;
                width: 100%;
                height: 50%;
              }
            }
          }
        }
      }

      .right {
        width: 25%;
        height: 100%;
        float: left;
        position: relative;
        overflow: hidden;

        .rb {
          width: 100%;
          height: 50%;

          .con {
            width: 65%;
            height: 70%;
            margin: 0 auto;
          }
        }

        .shang {
          .con {
            margin-top: 25%;
          }
        }

        .xia {
          .con {
            margin-top: -10%;
          }
        }
      }
    }
  }
}
</style>
